import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { HomeWrapper } from './style';
import HomeBanner from './c-cpns/home-banner';

import { fetchHomeGoodPriceAction } from '@/store/modules/home';
import { changeHeaderConfigAction } from '@/store/main';

import useScrollTop from '@/hooks/useScrollTop';

import HomeSectionV1 from './c-cpns/home-section-v1';
import HomeSectionV2 from './c-cpns/home-section-v2';

import { isEmptyObject } from 'src/utils';
import SectionLongfor from './c-cpns/home-section-longfor';
import HomeSectionV3 from './c-cpns/home-section-v3';

const Home = memo(() => {
  // 获取redux中的state
  const goodPriceInfo = useSelector((state) => state.home.goodPriceInfo);
  const highScoreInfo = useSelector((state) => state.home.highScoreInfo);
  const discountInfo = useSelector((state) => state.home.discountInfo);
  const hotRecommendInfo = useSelector((state) => state.home.hotRecommendInfo);
  const longForInfo = useSelector((state) => state.home.longForInfo);
  const plusInfo = useSelector((state) => state.home.plusInfo);

  useScrollTop();
  // 发起网络请求 dispatch 派发异步事件
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchHomeGoodPriceAction());
    // header
    dispatch(changeHeaderConfigAction({ isFixed: true ,topAlpha:true}));
  }, [dispatch]);

  return (
    <HomeWrapper>
      {/* 1. banner */}
      <HomeBanner />
      {/* 2. content */}
      <div className="content">
        {/* 折扣区域 */}
        {isEmptyObject(discountInfo) && <HomeSectionV2 infoData={discountInfo} />}
        {isEmptyObject(hotRecommendInfo) && <HomeSectionV2 infoData={hotRecommendInfo} />}
        {isEmptyObject(longForInfo) && <SectionLongfor infoData={longForInfo} />}
        {isEmptyObject(goodPriceInfo) && <HomeSectionV1 infoData={goodPriceInfo} />}
        {isEmptyObject(highScoreInfo) && <HomeSectionV1 infoData={highScoreInfo} />}
        {isEmptyObject(plusInfo) && <HomeSectionV3 infoData={plusInfo} />}
      </div>
    </HomeWrapper>
  );
});

export default Home;
